@import (reference) "bootstrap-custom";
@import "bootstrap-override";
@import "custom-fonts";
@import (reference) "font-styles";
@import "inputs";

@header-height: 80px;
@nav-tab-height: 36px;

html, body {
    height: 100%;
    min-width: 1280px;
    position: relative;
    width: 100%;
}

.underline {
    text-decoration: underline;
}

.questionnaire-logo {

    img {
        display: inline-block;
        height: 55px;
        width: auto;
        margin-right: 10px;
    }

    a {
        color: #727d84;
        font-size: 18px;
        line-height: 20px;
        font-weight: bold;
        display: table-cell;
    }

    a:hover, a:focus {
        text-decoration: none;
    }

    .logo {
        padding-right: 5px;
        border-right: 2px solid #727d84;
    }

    .navbar-text {
        vertical-align: middle;
        padding-left: 10px;
        padding-right: 10px;
        margin: 0;
        float: none;
        font-size: 23px;
        line-height: 25px;
    }
}
.container-wb-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    overflow: hidden;

    .header-wb-list {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: @header-height;
        z-index: 2;

        header {
            .questionnaire-logo {
                display: table;
                width: 270px;
                height: 54px;
                margin: 12px 33px;
                position: absolute;
                top: 0;
                left: 0;
            }

            .nav-tabs {
                white-space: nowrap;
                display: flex;
                width: 100%;
                border: none;
                border-left: 13px solid #bcc3c8;

                & > li {
                    margin-top: @header-height - @nav-tab-height;

                    &:first-child {
                        margin-left: 280px;
                    }

                    & > a {
                        padding-top: 0;
                        padding-bottom: 0;
                        line-height: @nav-tab-height;
                        height: @nav-tab-height;
                    }
                }
            }

            nav {
                float: right;
                margin: 10px 18px 0 0;
                position: absolute;
                top: 0;
                right: 0;
            }
        }
    }

    section#designer-list {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: @header-height - 1px;
        z-index: 1;

        #table-content-holder {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            top: 45px;
            border-top-width: 0;
            border-top-style: none;

            & > .scroller-container {
                height: 100%;
                position: relative;
                overflow: hidden;
            }

            ul.pagination {
                .trebuchet14b();
                margin: 0 15px;

                li {
                    a {
                        &:hover {
                            text-decoration: underline;
                        }
                    }

                    &.active, &.disabled {
                        a {
                            &:hover {
                                text-decoration: none;
                            }
                        }
                    }
                }
            }

            ul.pager {
                .trebuchet12b();
                text-align: left;
                margin: 0 15px;

                a {
                    color: @brand-success;
                }

                .disabled a {
                    color: @gray-lighter;
                }
            }
        }
    }
}


div#table-message {    
    background: #edeff0;
    position: relative;
    border-bottom: 1px solid #dddddd;

    p {
        .arial16I();
        padding: 20px 50px 0 110px;
    }

    button {
        font-weight: bold;
        margin: 0 100px;
        text-decoration: none;
    }

    a.cross {
        position: absolute;
        top: 10px;
        right: 10px;
        background: url("../i/cross.png");
        height: 40px;
        width: 40px;

        &:hover {
            background-position: 0 -40px;
        }
    }
}


table.table-header {
    cursor: default;
    border-top: 1px solid #dddddd;
    border-left: 13px solid #bcc3c8;
    border-bottom: 2px solid #b1b5b8;
    margin: 0;
    .trebuchet12b();
    color: @pagination-active-color;

    tr {
        th {
            padding-top: 5px;
            padding-right: 21px;
            line-height: 14px;

            a {
                color: @pagination-active-color;
            }

            a:hover {
                text-decoration: none;
            }

            span.glyphicon {
                color: @pagination-active-color;
            }

            &.ordered {
                padding-right: 8px;
                a, span.glyphicon {
                    color: @btn-default-color;
                }
            }
        }
    }
}


table.table-content {
    cursor: default;
    table-layout: fixed;

    tr {
        td {
            &.search-value {
                .robotoL18();
                color: @table-text-color;
                border-left: 13px solid @input-border;

                a {
                    color: @table-text-color;
                }
            }

            &.date {
                .georgia14I();
                color: @tooltip-color;
            }

            &.email {
                .georgia14I();
                color: #cbcbcb;

                strong {
                    color: @tooltip-color;
                    font-weight: normal;
                }
            }
        }

        &:first-child th,
        &:first-child td {
            border-top: none;
        }

        &:last-child {
            border-bottom: 1px solid #e2e3e4;
        }

        &:hover {
            background-color: @table-bg-hover;

            td {
                &.email {
                    color: @tooltip-color;
                }
            }
        }

        &.active {
            background-color: @table-bg-hover;
        }
    }
}


table#questionnaire-table-header,
table#questionnaire-table-content {
    tr {
        td, th {
            &:nth-child(1) {
                width: 45%;
            }

            &:nth-child(2) {
                width: 10%;
                white-space: nowrap;
            }

            &:nth-child(3) {
                width: 10%;
                white-space: nowrap;
            }

            &:nth-child(4) {
                width: 30%;
            }
        }
    }
}

table#user-table-header,
table#user-table-content {
    tr {
        td, th {
            &:first-child {
            }

            &:nth-child(2) {
                width: 20%;
            }

            &:nth-child(3) {
                width: 11%;
            }

            &:nth-child(4) {
                width: 10%;
            }

            &:nth-child(5) {
                width: 10%;
            }

            &:nth-child(6) {
                width: 10%;
            }

            &:last-child {
                width: 10%;
            }
        }
    }
}

table#questionnaire-table-content {
    tr {
        td {
            &:first-child {
                span.summary {
                    .lucidaC14();
                    color: #b9c3ca;
                }
            }
        }

        &:hover {
            td {
                &:first-child {
                    color: #1c76c3;

                    span.summary {
                        color: #788792;
                    }
                }

                &:nth-child(4) {
                    color: @tooltip-color;
                }
            }
        }

        &.active {
            background-color: @table-bg-hover;

            td {
                &:first-child {

                    span.summary {
                        color: #b9c3ca;
                    }

                    &:hover {
                        color: @gray-dark;
                    }
                }

                &:nth-child(4) {
                    color: @tooltip-color;
                }
            }
        }

        &.deleted {
            td {
                text-decoration: line-through;
            }
        }
    }
}

table.table-header,
table.table-content {
    tr {
        td, th {
            &:first-child {
                padding-left: 20px;
            }

            &:last-child {
                padding-right: 20px;
            }
        }
    }
}

#frmSearch {
    position: relative;
    display: inline-block;
    margin-left: 30px;

    .input-group {
        width: calc(100% - 35px);
        float: left;
    }

    .btn {
        border: 1px solid #dbdfe2;
    }

    #txtFilter {
        padding: 6px;
    }

    .clear-search {
        @btn-size: 30px;
        width: @btn-size;
        height: @btn-size;
        border: none;
        padding: 0;
        display: inline-block;
        background: transparent url(../i/cross.png) -5px -5px;

        &:hover {
            background-position: -5px -45px;
        }
    }
}

#user-table-header #frmSearch {
    margin-left: 20px;
}

.nav.nav-tabs > li > a {
    padding-top: 8px;
    padding-bottom: 8px;
}

#edit-form {
  padding: 3px 3px 0;
  border-top: 1px solid #ddd;
    margin: 0;
    border-left: 13px solid #dbdfe2;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;    

    .header.alert.alert-success {
        .robotoL24();
        color: @brand-success;
        background-color: inherit;
        border: none;
        padding: 0;
        margin: 0;
    }

    h1 {
        .robotoL30();
        margin-bottom: 20px;
        margin-top: 7px;
    }

    p {
        font-weight: bold;
    }

    input {
        max-width: 400px;
    }

    ::-webkit-input-placeholder {
        font-style: italic;
    }

    :-moz-placeholder { /* Firefox 18- */
        font-style: italic;
    }

    ::-moz-placeholder { /* Firefox 19+ */
        font-style: italic;
    }

    :-ms-input-placeholder {
        font-style: italic;
    }

    label {
        font-weight: normal;

        small {
            color: #bfd8ed;
        }
    }

    .has-error {
        color: @brand-danger;

        ::-webkit-input-placeholder {
            color: @brand-danger;
        }

        :-moz-placeholder { /* Firefox 18- */
            color: @brand-danger;
        }

        ::-moz-placeholder { /* Firefox 19+ */
            color: @brand-danger;
        }

        :-ms-input-placeholder {
            color: @brand-danger;
        }

        input {
            border-color: #f0d8d8;
        }
    }

    .form-actions {
        button, a {
            letter-spacing: 1px;

            &:nth-child(2), &:nth-child(3) {
                padding-left: 23px;
                padding-right: 0;
            }
        }
    }
}

.start-pdf-generation .dropdown .dropdown-toggle {
    width: 300px;
    background: transparent;
    position: relative;
    float: left;
    text-align: left;
    font: 14px/16px Arial,Helvetica,sans-serif;
    border: 1px solid #dbdfe2;
    text-transform: none;
    color: #555;
    height: 42px;
    letter-spacing: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 5px 0 0 5px;
    padding-right: 30px;
}

.start-pdf-generation .dropdown .dropdown-toggle:after {
    content: "";
    display: block;
    position: absolute;
    top: 15px;
    right: 10px;
    width: 0;
    height: 0;
    border-top: 12px solid #a6a8a9;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-bottom: none;
}

.start-pdf-generation .dropdown.open .dropdown-toggle:after {
    border-top: none;
    border-bottom: 12px solid #a6a8a9;
}

.start-pdf-generation .dropdown .dropdown-menu {
    width: 300px;
}

.start-pdf-generation .dropdown .dropdown-menu > li > a {
    display: block;
    padding: 7px 20px;
    color: #6b6b6b;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.start-pdf-generation .dropdown .dropdown-menu > li > a:hover,
.start-pdf-generation .dropdown .dropdown-menu > li > a:focus {
    color: #000;
}

.start-pdf-generation .dropdown .dropdown-toggle:hover,
.start-pdf-generation .dropdown .dropdown-toggle:focus,
.start-pdf-generation .dropdown .dropdown-toggle:active {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

.start-pdf-generation .btn-default {
    padding: 14px 10px;
    background: transparent;
    border: 1px solid #dbdfe2;
    color: #555;
    float: left;
    border-radius: 0 5px 5px 0;
    position: relative;
    left: -1px;
}

.start-pdf-generation .btn-default:hover,
.start-pdf-generation .btn-default:focus,
.start-pdf-generation .btn-default:active {
    background-color: #f3f3f3;
    color: #000;
}

.folder-tree .fancytree-plain.fancytree-container span.fancytree-node {
    display: block;
    overflow: hidden;
    margin: 0;
}

.folder-tree .fancytree-expander {
    margin: 8px 5px 8px 0;
    color: #a6a8a9;
}

.folder-tree span.fancytree-node span.fancytree-expander:hover,
.folder-tree span.fancytree-node span.fancytree-expander:focus,
.folder-tree span.fancytree-node span.fancytree-expander:active,
.folder-tree .fancytree-expander:active,
.folder-tree .fancytree-checkbox:hover,
.folder-tree .fancytree-checkbox:focus,
.folder-tree .fancytree-checkbox:active {
    color: #000;
}

.folder-tree .fancytree-node:hover .fancytree-title {
    text-decoration: underline;
}

.folder-tree .fancytree-container {
    border: none;
}

.breadcrumb.public-questionnaires-breadcrumb:before,
.folder-tree .tree-icon,
.tree-icon {
    background: url("../images/DR-2017-folders-icons-G2-color.png") no-repeat;
    background-size: 32px 96px;
    vertical-align: top;
    background-position: 0 -66px;
}

.folder-tree .tree-icon {
    width: 30px;
    height: 30px;
    margin: 0;
    display: inline-block;
}

.folder-tree .tree-icon.folder-open,
.tree-icon.folder-open {
    background-position: 0 -2px;
}

.folder-tree .tree-icon.folder-closed,
.tree-icon.folder-closed {
    background-position: 0 -34px;
}

.folder-tree .fancytree-title {
    width: calc(100% - 50px);
    font: 18px/20px "Roboto-Bold";
    padding: 5px 10px;
    margin: 0;
    color: #4d4d4d;
    border: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-line;
}

.folder-tree .fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-node.fancytree-active:hover span.fancytree-title,
.folder-tree .fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-node.fancytree-active span.fancytree-title,
.folder-tree .fancytree-plain.fancytree-container span.fancytree-node.fancytree-active:hover span.fancytree-title {
    background: transparent;
    border-color: transparent;
}

.folder-tree .fancytree-plain.fancytree-container span.fancytree-node.fancytree-active span.fancytree-title {
    background-color: transparent;
    text-decoration: underline;
    color: #4d4d4d;
}

.folder-tree .fancytree-plain.fancytree-container span.fancytree-title:hover {
    background: transparent;
}

.breadcrumb.public-questionnaires-breadcrumb {
    border-top: 1px solid #ddd;
    font-weight: bold;
    background-color: transparent;
    border-radius: 0;
    margin-bottom: 0;
    padding-left: 55px;
    border-left: 13px solid #bcc3c8;
}

.public-questionnaires-breadcrumb li {
    display: inline-block;
    max-width: 400px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.breadcrumb.public-questionnaires-breadcrumb.tree-icon {
    background-position: 10px -28px;
}

.breadcrumb.public-questionnaires-breadcrumb a {
    color: #777;
}

table.table-header.page-with-breadcrumbs {
    border-top: none;
}

.list-with-icons .search-value {
    position: relative;
}

.list-with-icons .search-value a {
    padding-left: 40px;
    display: inline-block;
}

.breadcrumb.public-questionnaires-breadcrumb:before,
.list-with-icons .tree-icon {
    display: block;
    position: absolute;
    top: 5px;
    left: 20px;
    width: 30px;
    height: 30px;
}

.breadcrumb.public-questionnaires-breadcrumb:before {
    content: "";
    background-position: 0 -2px;
    left: 30px;
}

.folder-tree .fancytree-checkbox ~ .fancytree-title {
    width: calc(100% - 65px);
}

.folder-tree .fancytree-checkbox {
    margin: 6px 5px 6px 0;
    cursor: pointer;
    width: 24px;
    height: 18px;
    background: transparent url("../images/chekboxes2k.png") no-repeat;
    background-size: 68px 350px;
    background-position: 0 0px;
}

.folder-tree .fancytree-checkbox:hover,
.folder-tree .fancytree-checkbox:focus {
    background-position: 0 -36px;
}

.folder-tree .fancytree-checkbox.tree-checkbox-checked {
    background-position: 0 -72px;
}

.folder-tree .fancytree-checkbox.tree-checkbox-checked:hover,
.folder-tree .fancytree-checkbox.tree-checkbox-checked:focus {
    background-position: 0 -108px;
}

.modal-body .folder-tree {
    max-height: 500px;
    overflow-y: auto;
}

.container-wb-list .wrapper-questionnaire-table {
    position: relative;
    width: 100%;
    height: 100%;
}
#designer-list #edit-form .form-group .field-validation-error {
    color: @error-text;
}
